<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <!-- 
        插值语法的注意事项：
        1. 插值语法中的变量都是从当前的vm对象上去找的
        2. 插值语法中可以书写任意表达式（由一个或者多个变量或值 配合0个或者多个运算符组成的，都被称为表达式，表达式都会有返回值），不能书写语句
        3. 插值的变量可以是任意类型的，按照一定的规则转为字符串来展示（Symbol除外）
     -->
    <div id="app">
      <h2>{{name}}</h2>
      <h2>{{age+1}}</h2>
      <h2>{{5&&0}}</h2>
      <h2>{{isHot?'热':'冷'}}</h2>
      <h2>{{hobby[0]}}</h2>
      <h2>{{score.english}}</h2>
      <h2>null--{{null}}</h2>
      <h2>undefined{{undefined}}</h2>
      <!-- 不能识别Symbol -->
      <h2>bigInt--{{1n}}</h2>
      <h2>arr--{{hobby}}</h2>
    </div>
  </body>
</html>
<script>
  const vm = new Vue({
    el: '#app',
    data() {
      return {
        name: '王伟伦',
        age: 20,
        sex: '男',
        hobby: ['做饭', '摔角', 'game'],
        score: {
          chinese: 100,
          math: 100,
          english: 20,
        },
        isHot: true,
      };
    },
  });
</script>
